<template>
  <div class="app-container">
    <el-form style="overflow:hidden">
      <el-row>
        <el-col :span="12">
          <el-form-item
            label-width="105px"
            class="postInfo-container-item"
            style="padding-right:40px"
            label="计划名称"
          >
            <el-input v-model="postForm.planName" readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label-width="105px"
            class="postInfo-container-item"
            style="padding-right:40px"
            label="创建者"
          >
            <el-input v-model="postForm.creatorName " readonly="readonly"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label-width="105px" class="postInfo-container-item" label="实际时间">
            <!-- <el-date-picker v-model="postForm.startDate"
                          type="date"
                          class="filter-item"
            readonly="readonly"></el-date-picker>-->
            <el-date-picker
              type="daterange"
              readonly="readonly"
              range-separator="至"
              :start-placeholder="postForm.startDate"
              :end-placeholder="postForm.overDate"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label-width="105px" class="postInfo-container-item" label="检查目标">
            <el-select v-model="postForm.targetId" placeholder="检查目标" disabled style="width:220px">
              <el-option
                v-for="(item,index) in ddlTarget"
                :key="index"
                :label="item.text"
                :value="Number(item.value)"
                :selected="item.selected"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label-width="105px"
                      class="postInfo-container-item"
                      label="计划完成时间">
          <el-date-picker v-model="postForm.overDate"
                          type="date"
                          class="filter-item"
                          readonly="readonly"></el-date-picker>
          </el-form-item>-->
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left">检查任务</el-divider>

    <el-table :data="objectList" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="任务名称">
        <template slot-scope="scope">
          <span>{{ scope.row.taskName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="被检查企业">
        <template slot-scope="scope">
          <span>{{ scope.row.companyName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="任务负责人">
        <template slot-scope="scope">
          <span>{{ scope.row.executorName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="安全负责人">
        <template slot-scope="scope">
          <span>{{ scope.row.safetyOfficerName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="任务状态">
        <template slot-scope="scope">
          <span>{{ scope.row.taskStateName }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <router-link :to="'/danger/troubleReporter/'+scope.row.id">
            <el-button class="filter-item" type="primary" icon="el-icon-search">查看报表</el-button>
          </router-link>
        </template>
      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
import { fetchList, fetchCheckPlan, fetchBasics } from '@/api/checkplan'

export default {
  name: 'lookPlan',
  props: {
    isLook: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: null,
      postForm: {
        planName: '',
        unit: '',
        endTime: '',
        beginTime: ''
      },
      ddlTarget: [],
      objectList: null, //对象
      total: 0,
      listLoading: true,
      dialogFormVisible: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      dialogForm: {
        unit: '',
        checkObj: '',
        checkTable: '',
        executePeop: ''
      },
      currentSelectNode: {}
    }
  },
  created() {
    // console.log(this.isLook)
    // if (this.isLook) {
    //如果是查看数据
    const id = this.$route.params && this.$route.params.id
    this.fetchData(id)
    // }
    this.getBasics()
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    //根据id获取用户数据信息
    fetchData(id) {
      fetchCheckPlan(id)
        .then((response) => {
          // console.log(response)
          this.postForm = response.data.mo
          this.objectList = response.data.mo.listCheckTaskVo

          // console.log('response.data.mo', response.data.mo)
          this.setTagsViewTitle()

          this.setPageTitle()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getBasics() {
      this.listLoading = true
      fetchBasics().then((response) => {
        this.ddlTarget = response.data.ddlTarget //检查目标
        // console.log('target', this.ddlTarget, this.postForm.targetId)
        // this.ddlTarget.forEach((item) => {
        //   if (item.value == this.postForm.targetId) {
        //     this.postForm.targetId = item.text
        //   }
        // })
        // console.log('ddlTarget')
        // console.log(this.ddlTarget)
        this.ddlExecutor = response.data.ddlExecutor //检查人
        this.ddlCompany = response.data.ddlCompany //公司
        this.listLoading = false
      })
    },
    setTagsViewTitle() {
      const title = '查看检查计划'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.postForm.id}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = '查看检查计划'
      document.title = `${title} - ${this.postForm.id}`
    },
    //保存添加对象
    addChecktarget() {
      let newChecktarget = {
        id: 100,
        pid: this.currentSelectNode.data.pid,
        label: this.dialogForm.checktargetName,
        comments: this.dialogForm.comments
      }
      this.$refs.checktargetTree.append(newChecktarget, this.currentSelectNode)
      this.dialogFormVisible = false
    }
    //页码
    // getList() {
    //   this.listLoading = true
    //   fetchList(this.listQuery).then((response) => {
    //     this.list = response.data.items
    //     this.total = response.data.total
    //     this.listLoading = false
    //   })
    // }
  }
}
</script>

<style scoped  lang="scss" >
@import '~@/styles/mixin.scss';
.app-container /deep/ .el-divider--horizontal:first-child {
  width: 75%;
  display: inline-block;
}
.app-container /deep/ .el-input {
  width: 50%;
}
.app-container /deep/ .el-divider--horizontal:last-child {
  width: 24%;
  display: inline-block;
}
.app-container /deep/ .el-select {
  width: 82%;
}
.app-container /deep/ .el-dialog__footer {
  text-align: center;
}
.app-container /deep/ .dialog-footer {
  text-align: center;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.pagination-container {
  padding: 0;
}
.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
</style>
